const html = 
`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
`
const readme = 
`# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 \`<script setup>\` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

## use
    启动服务器: npm run dev,
    打包: npm run build,
`


const gitignore = 
`node_modules
.DS_Store
dist
dist-ssr
*.local`

const storeIndex = `import {createStore} from 'vuex'

export const store = createStore({
    state:{
        text:'storeData'
    }
})`


const comVue = `<template>
<p>源码请访问：<a href="https://gitee.com/wizardAEI/glassMore">我们的gitee😋</a> 
<a href="https://gitee.com/wizardAEI/vue-demo-created-with-vite">vite-Vue😋</a></p> 
</template>`


const homeVue = `<template>
<div>这里用来演示setup语法糖</div>
name:{{name}}
</template>

<script setup lang="jsx">
import {ref, inject} from 'vue'
const name = ref('xiaoming')
</script>

<style lang="less">

</style>`

const jsxVue = `<script lang = 'jsx'>
import { ref } from "vue";
export default {
    setup () {
        const msg = ref('hi jsx')
        return ()=>(<>
                <div>this is jsx</div>
                <p> this is the reactive data: {msg.value}</p>
            </>)
    }
}
</script>

<style scoped lang="less">

</style>`

const mockVue = `<template>
<div>
    <button @click="toFetch">发起请求</button>
    （查看console）
</div>
</template>

<script setup lang="">
const toFetch = () => {
    fetch('/api/getUsers').then(res => res.json()).then(data=>{
        console.log(data)
    })
}
</script>

<style>

</style>`

const otherVue = `<template>
<div>
    <button @click="sonClick"> 演示emit（查看console） </button><br>
    演示defineProps{{msg}}
</div>
<div>
    <span>从父组件传来的值，通过inject注入:{{sondata}}</span>
</div>
</template>

<script setup>
import { inject } from 'vue'
import pac from '../../package.json'

//将json转为Obj
console.log(pac)

//父组件定义属性
const props = defineProps({
    msg: String
});

//传递自定义事件
const emit = defineEmits(['myclick','myclick2'])
const sonClick = function() {
    emit('myclick')
}


//inject
const sondata = inject('fatherData')
</script>


<style scoped lang="less">
div {
    botton {
        background-color: aquamarine;
    }
}
</style>`


const vuexVue = `<template>
<div>这里用来演示vuex</div>
{{text}}
</template>

<script setup>
    import { ref } from "@vue/reactivity";
    import { useStore } from "vuex";    
    const store = useStore()
    const text = ref(store.state.text) 
</script>
`

export {html, readme, gitignore, storeIndex, comVue, homeVue, jsxVue, mockVue, otherVue, vuexVue}
